/*
    gulp 相关程序的说明:

    gulp 存储的是 导入 gulp依赖包 中 导入的所有的函数方法程序

    gulp.src    是 gulp依赖包自带的函数程序
                加载 需要执行程序的文件
                *.css   表示 当前文件夹中 文件名称 任意 扩展名称 必须是 css的文件
                *.*     表示 当前文件夹中 所有文件  没有 文件夹只有文件
                **      表示 所有 文件夹中的 所有文件  有 嵌套的文件夹和文件

    gulp.pipe   是 gulp依赖包自带的函数程序
                一般是 写在 src之后 
                对 src 导入 加载 的 文件 执行 打包压缩规范

    gulp.dest   将 执行完 打包压缩规范的文件 存储在 指定的文件夹中
                如果 没有设定 文件件名称 使用原始文件名称

    gulp.watch  是 gulp依赖包自带的函数程序
                参数1: 指定 监听的文件路径 
                参数2: 监听文件内容改变时 调用的 依赖包程序
                       参数2 是 回调函数形式 必须是 函数名称 / 匿名函数

    module.exports.default  
                gulp 模块化 开发的固定语法形式
                表示 设定 gulp 默认执行的程序内容
                效果就是 再 运行gulp文件 可以 直接输入 gulp命令
                自动 找 到 gulpfile.js 文件 来 执行其中 default 导出的程序
                
    
    gulp.series     是 gulp依赖包自带的函数程序
                    是 按照顺序 执行 设定的程序

    gulp.parallel   是 gulp依赖包自带的函数程序
                    是 同时顺序 执行 设定的程序
                    参数是 函数名称


*/

// 1, 先 加载导入 依赖包

// 导入 gulp 依赖包
const gulp = require('gulp');

// 导入css相关依赖包
const cssmin = require('gulp-cssmin');
const autoprefixer = require('gulp-autoprefixer');

// 导入js相关依赖包
// 下载4个 导入两个 另外两个 babel 会自动导入
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

// 导入html相关压缩规范
const htmlmin = require('gulp-htmlmin');

// 导入 删除依赖包
const del = require('del');

// 2, 制定css打包压缩规范
const cssHandler = function(){
    // 定义一个函数 函数的程序内容就是 打包压缩的规范的设定
    return gulp.src('./src/css/*.css')          // 告诉 gulp压缩整程序 要压缩的文件是 src文件夹中的 css文件夹 中 扩展名是 css的文件
           .pipe( autoprefixer() )              // 通过 pipe方法 对 src()方法导入的文件 执行 打包规范 添加 css前缀
           .pipe( cssmin() )                    // 通过 pipe方法 对 src()方法导入的文件 执行 打包规范 压缩 css文件内容
           .pipe( gulp.dest('./dist/css') );    // 通过 pipe方法 对 src()方法导入的文件 最终 存储到 指定的文件夹中
}

// 3, 指定js打包压缩规范
const jsHandler = function(){
    return gulp.src('./src/js/*.js')
           .pipe( babel({presets:['@babel/env']}) )
           .pipe( uglify() )
           .pipe( gulp.dest('./dist/js') );
}

// 4, 指定html打包压缩规范
const htmlHandler = function(){
    return gulp.src('./src/page/*.html')
           .pipe( htmlmin({
                removeAttributeQuotes : true ,      // 删除属性中的多余的双引号
                removeComments : true ,             // 删除注释
                removeEmptyAttributes : true ,      // 删除 空属性
                // removeEmptyElements : true ,        // 删除 空标签
                removeScriptTypeAttributes : true ,     // 删除 script标签 type属性
                removeStyleLinkTypeAttributes : true,   // 删除 style标签 link标签 type属性 
                collapseBooleanAttributes : true ,      // 删除 布尔属性的属性值
                collapseWhitespace : true ,             // 删除 标签键值的 换行和空格
                minifyCSS : true ,                      // 打包压缩 内部 css语法
                minifyJS : true ,                       // 打包压缩 内部 js语法 一般不会压缩成功 js程序不要写成 内部语法形式
           }))
           .pipe( gulp.dest('./dist/page') )
}

// 5, 指定图片打包压缩规范
// 不打包 直接存储到 dist文件夹中 对应的位置
const imgHandler = function(){
    return gulp.src('./src/image/*.*').pipe(gulp.dest('./dist/image'));
}

// 6, 指定php打包压缩规范
// 不打包 直接存储到 dist文件夹中 对应的位置
const phpHandler = function(){
    return gulp.src('./src/server/*.php').pipe(gulp.dest('./dist/server'));
}


// 7, 指定插件工具打包压缩规范
// 不打包 直接存储到 dist文件夹中 对应的位置
const toolsHandler = function(){
    return gulp.src('./src/tools/**').pipe(gulp.dest('./dist/tools'));
}



// 8, 指定插件字体图标打包压缩规范
// 不打包 直接存储到 dist文件夹中 对应的位置
const wordPHandler = function(){
    return gulp.src('./src/font_i6c7enf4dm/**').pipe(gulp.dest('./dist/font_i6c7enf4dm'));
}


// 删除规范
const delHandler = function(){
    return del(['./dist']);     // 删除 dist文件夹中 原始的压缩文件
}



// 监听规范
const watchHandler = function(){
    gulp.watch( './src/css/*.css' , cssHandler );   // 监听的 src文件夹中css文件夹中 扩展名是 css的文件 内容 改变是 触发执行 cssHandler 打包压缩程序
    gulp.watch( './src/js/*.js' , jsHandler );
    gulp.watch( './src/page/*.html' , htmlHandler );
    gulp.watch( './src/image/*.*' , imgHandler );
    gulp.watch( './src/server/*.php' , phpHandler );
    gulp.watch( './src/tools/**' , toolsHandler );
    gulp.watch( './src/font_i6c7enf4dm/**' , wordPHandler );


}

// 设定默认执行程序
// 调用文件 使用的是 gulp 命令
module.exports.default = gulp.series(
    delHandler,                     // 先 删除 原始压缩文件 确保压缩文件 和 当前的 源文件相同
    
    gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler , phpHandler , toolsHandler , wordPHandler),    
                                    // 再 同时 执行所有需要的压缩程序

    watchHandler                    // 再 执行 监听程序 监听程序是 函数名称 不是 函数调用
);





/*
    基本套路的总结:
        定义一个函数程序(){
            return gulp.src(读取导入文件路径).pipe(打包压缩规范).pipe(打包压缩规范).pipe(打包压缩规范).pipe( gulp.dest(存储的路径) )
        }


    整个 gulp 执行的套路

    1, 导入 依赖包 

    2, 定义 压缩规范

    3, 定义 删除规范

    4, 定义 监听规范

    5, 定义 默认程序
        按照顺序执行程序
            删除规范
            同时执行 所有的压缩规范
            执行 监听规范

    代码 都是固定的 
    只有 文件路径 / 参数设定 有可能改变

*/ 
